<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /**
         * 方法名：ajax
         * 参数1：路径
         * 参数2：数据
         * 参数3：回调函数
         * */ 
            // {name:'laowang',age:18} => name=laowang&age=18
            // let str = '';
            // for(let item in data){
            //     console.log(item);
            //     str+=`${item}=${data[item]}&`;
            // }
            // // str = str.slice(0,-1);
            // str = str.substring(0,str.length-1);
            // console.log(str);
        function ajax(url,data,cb,method){
            let x = new XMLHttpRequest();
            // Object.keys(data) = ['name','age']
            // `${item}=${data[item]}` = 'name=laowang'
            // Object.keys(data).map(item=>`${item}=${data[item]}`) = ['name=laowang','age=18']
            // Object.keys(data).map(item=>`${item}=${data[item]}`).join('&') = 'name=laowang&age=18'
            let str = Object.keys(data).map(item=>`${item}=${data[item]}`).join('&');
            console.log(str);
            if(method === 'post'){
                x.open('post',url)
                x.setRequestHeader('Content-type','application/x-www-form-urlencoded')
                x.send(str);
            }else if(method === 'get' || method===undefined){
                x.open('get',url+'?'+str)
                x.send();
            }
            x.onreadystatechange = function(){
                if(x.readyState===4&&x.status===200){
                    // console.log(x.response);
                    cb(x.response)
                }
            }
        }
        ajax('http://localhost/postServer',{name:'laowang',age:18},(res)=>{
            console.log(res);
        });


        // 1. 声明ajax函数，声明三个形参
        // 2. 声明xhr对象
        // 3. 打开请求
        // 4. 设置请求头（可选）
        // 5. 将参数2数据解析成 表单格式数据 key=val&key=val
        // 6. 发送请求
        // 7. 设置响应数据类型
        // 8. 监听xhr对象就绪状态
            // 9. 判断状态码
            // 10. 执行回调（传入响应数据）
    </script>
</body>

</html>